<template>
	<el-dialog width="74%" class="goods_popups" title="选择商品" :visible.sync="goodsDialog" :append-to-body="true"
		v-dialogDrag>
		<div class="dflex_sb">
			<div></div>
			<div class="dflex_vertical_c margin_b_20">
				<div class="search_name">商品名称：</div>
				<el-input v-model="req.name" placeholder="请输入" class="search_input" @change="search" clearable>
				</el-input>
				<el-button size="mini" :loading="searchBtnLoading" class="search-btn margin_l_10" @click="search">搜索
				</el-button>
			</div>
		</div>
		<el-table ref="goods" height="66vh" v-loading="tableLoading" :data="tableDatas" highlight-current-row
			@selection-change="selectionChange" @row-click="choice">
			<el-table-column type="selection" v-if="!isRadio"></el-table-column>
			<el-table-column label="商品" width="400" align="center">
				<template slot-scope="scope">
					<div class="dflex_vertical_c">
						<use-carousel :width="84" :height="84" :imgs="scope.row.imgs" :video="scope.row.video">
						</use-carousel>
						<div class="left_just margin_l_10">
							<el-popover popper-class="use_popover" :open-delay="200" :close-delay="40" placement="right"
								:title="scope.row.name" trigger="hover" :content="scope.row.name_pw || '--'">
								<div slot="reference" class="dflex_d_c">
									<div class="ellipsis crpr">{{ scope.row.name }}</div>
									<div class="ellipsis crpr">{{ scope.row.name_pw || '--' }}</div>
								</div>
							</el-popover>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="价格" align="center">
				<template slot-scope="scope">
					<div class="price">{{ scope.row.price / 100 }}</div>
					<div class="m_price">{{ scope.row.market_price / 100 }}</div>
				</template>
			</el-table-column>
			<el-table-column property="stock_num" label="库存" align="center"></el-table-column>
			<el-table-column property="state" label="状态" align="center"></el-table-column>
			<el-table-column label="数据统计" align="left" width="100">
				<template slot-scope="scope">
					<div class="left_just">
						<div>已售数:{{ scope.row.sale_cnt }}</div>
						<div>访问数:{{ scope.row.visit_cnt }}</div>
						<div>收藏数:{{ scope.row.collect_cnt }}</div>
						<div>分享数:{{ scope.row.share_cnt }}</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="标签" align="center" width="220">
				<template slot-scope="scope">
					<el-tag effect="plain" type="info" class="margin_r_5 margin_t_5 sele_none"
						v-for="(item, i) in scope.row.tags" :key="i">{{ item }}</el-tag>
				</template>
			</el-table-column>
			<div slot="empty">
				<el-empty description=" "></el-empty>
			</div>
		</el-table>
		<el-pagination background :current-page="req.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="req.rows"
			layout="total, sizes, prev, pager, next, jumper" :total="tableTotal" @size-change="sizeChange"
			@current-change="currentChange"></el-pagination>
		<div class="btn pos_a">
			<el-button :loading="confirmLoading" round icon="el-icon-check" class="confirm-btn" @click="confirm" v-if="!isRadio">提交</el-button>
			<el-button round icon="el-icon-back" class="return-btn" @click="goodsDialog = false">返回</el-button>
		</div>
	</el-dialog>
</template>

<script>
	const __name = 'wmzmall-goods';
	export default {
		data() {
			return {
				goodsDialog: false,
				isRadio: false,
				where_obj: {},
				req: {
					page: 1,
					rows: 20,
					orderby: 'sort asc',
					name: ''
				},
				tableDatas: [],
				tableTotal: 0,
				selectDatas: [],
				tableLoading: false,
				searchBtnLoading: false,
				confirmLoading: false,
			};
		},
		methods: {
			async loadData() {
				this.tableLoading = true;
				await this.$db[__name]
					.whereif(this.req.name, {
						name: new RegExp(this.req.name, 'i')
					})
					.where(this.where_obj)
					.totable(this.req)
					.then(res => {
						if (res.code == 200) {
							this.tableDatas = res.datas.rows;
							this.tableTotal = res.datas.total;
						}
						this.searchBtnLoading = false;
						this.tableLoading = false;
					});
			},
			search() {
				this.searchBtnLoading = true;

				this.req.page = 1;
				this.loadData();
			},
			show(data, radio) {
				for (const key in data) {
					if (data.hasOwnProperty(key)) {
						this.where_obj[key] = data[key];
					}
				}

				this.isRadio = radio;

				this.goodsDialog = true;
				this.loadData();
			},
			choice(row, column, event) {
				if (event.target.localName.indexOf('img') == -1) {
					if (this.isRadio) {
						this.$emit('choiceGoods', row);
						this.goodsDialog = false;
					} else {
						this.$refs.goods.toggleRowSelection(row);
					}
				}
			},
			selectionChange(val) {
				this.selectDatas = val;
			},
			confirm() {
				if (this.selectDatas.length <= 0) {
					this.$message('请选择商品');
					return;
				}
				
				this.confirmLoading = true;

				this.$emit('choiceGoods', this.selectDatas);
				this.confirmLoading = false;
				this.goodsDialog = false;
			},
			sizeChange(size) {
				this.req.rows = size;
				this.loadData();
			},
			currentChange(current) {
				this.req.page = current;
				this.loadData();
			}
		}
	};
</script>

<style>
	.goods_popups >>> .el-dialog {
		border-radius: 10px;
	}

	.goods_popups .btn {
		bottom: 20px;
		right: 20px;
	}

	.goods_popups>>>.el-dialog__body {
		padding-top: 0;
	}
</style>
